<template>
  <div class="table-data">
    <el-form
      :rules="rules"
      ref="ruleForm"
      :model="form"
      label-width="200px"
      size="small"
      class="form-box"
    >
    
    <!-- <p class="title">基础信息设置</p> -->
    <el-tabs type="border-card">
      <el-tab-pane label="基础信息">
        <el-form-item label="商品标题" prop="title">
          <el-input type="text" v-model="form.title" placeholder="请输入商品标题"></el-input>
        </el-form-item>
        <el-form-item label="商品副标题" prop="sub_title">
          <el-input type="text" v-model="form.sub_title" placeholder="请输入商品副标题"></el-input>
        </el-form-item>
        <el-form-item label="封面图片" prop="cover">
          <uploadImg @bindSendImg="propImg" :imgUrl="form.cover"></uploadImg>
        </el-form-item>
        <el-form-item label="商品轮播图">
          <uploadImgList @bindSendImgList="propImgList" :imgUrl="form.images"></uploadImgList>
        </el-form-item>
        <el-form-item label="商品类型" prop="verify_type">
          <el-radio-group v-model="form.verify_type ">
            <el-radio :label="0">物流商品</el-radio>
            <el-radio :label="1">核销商品</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="制码模式" prop="ticket_type">
          <el-radio-group v-model="form.ticket_type">
            <el-radio :label="1">自建商品</el-radio>
            <el-radio :label="2">导码商品</el-radio>
            <el-radio :label="3">制码商品</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="售卖时间">
          <el-date-picker
              v-model="saleDateTime"
              type="datetimerange"
              value-format="yyyy-MM-dd hh:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="是否可退" prop="refund_able">
          <el-radio-group v-model="form.refund_able">
            <el-radio :label="1">可以退</el-radio>
            <el-radio :label="0">不可退</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上下架状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="form.vendor_id" clearable placeholder="供应商">
            <el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属商家">
          <el-select v-model="form.shop_id" clearable placeholder="所属商家">
            <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="商品所属标签" prop="application">
          <el-select v-model="value1" multiple placeholder="请选择">
            <el-option
            v-for="item in labelList"
            :key="item.id"
            :label="item.tag"
            :value="item.tag">
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="商品所属分类">
          <!-- <el-cascader
            :options="form.location"
            v-model="kindList"
            @change="handleChange">
          </el-cascader> -->
          <el-select v-model="form.cate_id" clearable placeholder="一级分类" @change="handleChange">
            <el-option v-for="item in kindList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="form.sub_cate_id" clearable placeholder="二级分类" @change="handleChangeTwo" style="margin:0 10px">
            <el-option v-for="item in kindListTwo" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <el-select v-model="form.third_sub_cate_id" clearable placeholder="三级分类">
            <el-option v-for="item in kindListThree" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-tab-pane>
      <!-- <el-tab-pane label="购买须知">
        <el-form-item label="" prop="application">
          <ueditor :content="form.content" :key="timer" @ueditor-change="editorChange"></ueditor>
        </el-form-item>
      </el-tab-pane> -->
      <el-tab-pane label="商品详情">
        <ueditor :content="form.describe" :key="timer" @ueditor-change="editorChange"></ueditor>
      </el-tab-pane>
      <el-tab-pane label="核销码">
        <el-form-item label="与商家结算时机" prop="verify_way">
          <el-select v-model="form.verify_way" clearable placeholder="请选择">
            <el-option label="核销后几天" value="1"></el-option>
            <el-option label="发货后几天" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="集具体几天" prop="verify_day">
          <el-input type="text" v-model="form.verify_day"></el-input>
        </el-form-item>
        <el-form-item label="一个商品生成的核销数码数量（无关规格）" prop="create_ticket_num">
          <el-input type="text" v-model="form.create_ticket_num"></el-input>
        </el-form-item>
        <el-form-item label="核销码保护期" prop="verify_hour">
          <el-input type="text" v-model="form.verify_hour"></el-input>
        </el-form-item>
        <el-form-item label="核销码有效期">
          <el-date-picker
              v-model="dateTime"
              type="datetimerange"
              value-format="yyyy-MM-dd hh:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="价格设置">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品规格" prop="guige">
              <el-radio-group v-model="form.guige">
                <el-radio :label="1">单规格</el-radio>
                <el-radio :label="2">多规格</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.verify_type==1 && form.guige==1">
            <el-form-item label="每个核销码供应商结算价" prop="vendor_settle_price">
              <el-input type="text" v-model="form.vendor_settle_price"></el-input>
            </el-form-item>
            <el-form-item label="单商品供应商算价">
              <span class="price-txt">100</span>
              <span class="price-tip">每个核销码供应商结算价*单个商品生成码数量</span>
            </el-form-item>
            <el-form-item label="每个核销码默认渠道结算价" prop="channel_settle_price">
              <el-input type="text" v-model="form.channel_settle_price"></el-input>
            </el-form-item>
            <el-form-item label="单商品渠道结算价">
              <span class="price-txt">100</span>
              <span class="price-tip">每个核销码默认渠道结算价*单个商品生成码数量</span>
            </el-form-item>
            <el-form-item label="原价" prop="original_price">
              <el-input type="text" v-model="form.original_price"></el-input>
            </el-form-item>
            <el-form-item label="建议售价（单个商品，非单个核销码）" prop="suggest_price">
              <el-input type="text" v-model="form.suggest_price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
              <el-input type="text" v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item label="重量（单位g）" prop="weight">
              <el-input type="text" v-model="form.weight"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.ticket_type==1 && form.guige==1">
            <p class="price-title" v-if="form.verify_type!=0">{{form.verify_type}}价格设置供应商为第三方</p>
            <p class="price-title" v-else>价格设置自营物流产品{{form.verify_type}}</p>
            <el-form-item v-if="form.verify_type!=0" label="供应商结算价" prop="vendor_settle_price">
              <el-input type="text" v-model="form.vendor_settle_price"></el-input>
            </el-form-item>
            <el-form-item v-else label="商家结算价" prop="merchant_settle_price">
              <el-input type="text" v-model="form.merchant_settle_price"></el-input>
            </el-form-item>
            <el-form-item label="渠道结算价" prop="channel_settle_price">
              <el-input type="text" v-model="form.channel_settle_price"></el-input>
            </el-form-item>
            <el-form-item label="原价" prop="original_price">
              <el-input type="text" v-model="form.original_price"></el-input>
            </el-form-item>
            <el-form-item label="建议零售价" prop="suggest_price">
              <el-input type="text" v-model="form.suggest_price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
              <el-input type="text" v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item label="重量（单位g）" prop="weight">
              <el-input type="text" v-model="form.weight"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24" v-if="form.ticket_type==1 && form.verify_type==0 && form.guige==1">
            <p class="price-title">价格设置自营物流产品</p>
            <el-form-item label="商家结算价" prop="merchant_settle_price">
              <el-input type="text" v-model="form.merchant_settle_price"></el-input>
            </el-form-item>
            <el-form-item label="渠道结算价" prop="channel_settle_price">
              <el-input type="text" v-model="form.channel_settle_price"></el-input>
            </el-form-item>
            <el-form-item label="原价" prop="original_price">
              <el-input type="text" v-model="form.original_price"></el-input>
            </el-form-item>
            <el-form-item label="建议零售价" prop="suggest_price">
              <el-input type="text" v-model="form.suggest_price"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="stock">
              <el-input type="text" v-model="form.stock"></el-input>
            </el-form-item>
            <el-form-item label="重量（单位g）" prop="weight">
              <el-input type="text" v-model="form.weight"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="24" v-if="form.guige==2">
            <div class="spec-box">
              <ul>
                <li v-for="(items,indexs) in specKindList" :key="indexs">
                  <el-input type="text" v-model="specKindList[indexs].name" placeholder="请填写规名称（如：颜色）"></el-input>
                  <el-input type="text" v-model="specKindList[indexs].value" placeholder="请填写规值（如：红色）"></el-input>
                  <el-button type="primary" size="mini" @click="handleAddSpecVal(indexs)"><i class="el-icon-plus"></i><span>添加</span></el-button>
                  <el-button type="danger" size="mini" @click="handleRemove(indexs)"><i class="el-icon-plus"></i><span>删除</span></el-button>
                  <div style="margin-bottom:10px">
                    <el-tag style="margin-right:10px" v-for="(item,index) in items.specList" :key="index" closable :disable-transitions="false" @close="handleRemoveVal(indexs,index)">{{item.value}}</el-tag>
                  </div>
                </li>
              </ul>
              <el-button type="primary" style="margin-bottom:10px" size="mini" @click="handleAddSpec()"><i class="el-icon-plus"></i><span>添加规格</span></el-button>
              <!-- 规格表 -->
              <div class="table-data">
                <!-- <el-form
                  ref="specForm"
                  :model="specForm"
                  size="small"
                  class="form-box"
                > -->
                  <table class="spec-table" width="1200">
                    <thead>
                      <th v-for="item in specKindList" :key="item.name">{{item.name}}</th>
                      <th>每个核销码商家结算价</th>
                      <th>商家结算价</th>
                      <th>每个核销码默认渠道结算价</th>
                      <th>渠道商结算价</th>
                      <th>原价</th>
                      <th>建议售价</th>
                      <th>库存</th>
                      <th>操作</th>
                      <!-- <th>重量（单位g</th> -->
                    </thead>
                    <tbody>
                      <tr v-for="(items,idx) in form.spec_goods_price" :key="items.key">
                        <td v-for="item in specKindList" :key="item.name">{{item.value}}</td>
                        <td><el-input type="text" v-model="form.spec_goods_price[idx].sell_price"></el-input></td>
                        <td >{{form.spec_goods_price[idx].sell_price}}</td>
                        <td><el-input type="text" v-model="form.spec_goods_price[idx].channel_settle_price"></el-input></td>
                        <td>{{form.spec_goods_price[idx.channel_settle_price]}}</td>
                        <td><el-input type="text" v-model="form.spec_goods_price[idx].original_price"></el-input></td>
                        <td><el-input type="text" v-model="form.spec_goods_price[idx].suggest_price"></el-input></td>
                        <td><el-input type="text" v-model="form.spec_goods_price[idx].stock"></el-input></td>
                        <td>
                          <el-button type="primary" size="mini" @click="handleDisable(1,data)">启用</el-button>
                          <el-button type="danger" size="mini" @click="handleDisable(0,data)">禁用</el-button>
                        </td>
                        <!-- <td><el-input type="text" v-model="form.spec_goods_price[idx].verify_hour"></el-input></td> -->
                      </tr>
                    </tbody>
                  </table>
                <!-- </el-form> -->
              </div>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="物流设置" v-if="form.verify_type=='0'">
        <el-form-item label="物流信息" prop="title">
          <el-radio-group v-model="form.client">
            <el-row>
              <el-col :span="24" style="margin-bottom:18px">
                <el-radio :label="0">统一运费</el-radio>
                <el-input type="text" v-model="form.shipping_price"></el-input>
              </el-col>
              <el-col :span="24">
                <el-radio :label="1">运费模板</el-radio>
                <el-select v-model="form.stock" clearable placeholder="请选择">
                  <el-option label="美食" value="1"></el-option>
                  <el-option label="生活" value="2"></el-option>
                  <el-option label="出行" value="3"></el-option>
                  <el-option label="娱乐" value="4"></el-option>
                  <el-option label="旅游" value="5"></el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-form-item>
      </el-tab-pane>
    </el-tabs>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="cancel" size="small">取消</el-button>
      <el-button @click="submitFormAdd('ruleForm')" type="primary" size="small">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide } from "vue-property-decorator";
import ueditor from "@/components/ueditor/index.vue";
import uploadImg from "@/components/uploadImg/index.vue";
import uploadImgList from "@/components/uploadImg/list.vue";
import goodsApi from "@/api/goods";
import businessApi from "@/api/business";
import supplierApi from "@/api/supplier";
@Component({
  components: {uploadImg,uploadImgList,ueditor}
})
export default class goodsAddDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Provide() timer:any=''
  @Provide() dateTime: any = [];//核销时间
  @Provide() saleDateTime: any = [];//售卖时间
  @Provide() value1: any = [];
  @Provide() imgList: any=[];//轮播列表
  @Provide() labelList: any=[];//标签列表
  @Provide() supplierList: any=[];//供应商列表
  @Provide() businessList: any=[];//商家列表
  @Provide() advertiser: any = [];//广告商
  @Provide() kindList: any = [];//所属分类列表
  @Provide() kindListTwo: any = [];//所属分类列表
  @Provide() kindListThree: any = [];//所属分类列表
  @Provide() state: boolean = false; // 状态默认值
  @Provide() specKindList: any = []; // 规格分类列表
  @Provide() advertisers: any = {
    dvertisersName: "",
    dvertisersKey: ""
  };
  @Provide() searchMapS:{//供应商查询条件
    name: string,
    phone:string,
  }={
    name:'',
    phone:''
  }
  @Provide() searchMapB:{
    keyword: string,
    cate_id: string,
    is_child: any,
  }={
    keyword: "",
    cate_id: "",
    is_child: 0
  }
  @Provide() searchItem:{
    item: string,
    parent_id: string,
    goods_id: any,
  }={
    item: "",
    parent_id: "",
    goods_id: 0
  }
  @Provide() form:any={
    guige:2,
    barcode:"",
    title:'',
    sub_title:'',
    cate_id:'',
    sub_cate_id:'',
    third_sub_cate_id:'',
    brand_id:'',
    stock:'',
    shipping_id:'',
    shipping_price:'',
    weight:'',
    cubage:'',
    status:'',
    price:'',
    cover:'',
    sale_on_time:'',
    sale_off_time:'',
    original_price:'',
    vendor_price:'',
    vendor_settle_price:'',
    channel_settle_price:'',
    merchant_settle_price:'',
    suggest_price:'',
    unit_name:'',
    vendor_id:'',
    shop_id:'',
    refund_able:'',
    ticket_type:'',
    verify_type:'',
    verify_way:'',
    verify_day:'',
    verify_start_time:'',
    verify_end_time:'',
    verify_hour:'',
    verify_ticket_num:'',
    create_ticket_num:'',
    describe:'',
    images:[
      // {
      //   url:'',
      //   order:'',
      //   is_main:''
      // }
    ],
    spec_item:[
      {
        id:'',
        item:'',
        parent_id:''
      }
    ],
    spec_goods_price:[
      {
      key:'',
      key_name:'',
      price:'',
      vendor_price:'',
      platform_price:'',
      sell_price:'',
      channel_settle_price:'',
      suggest_price:'',
      stock:'',
      bar_code:'',
      sku:'',
      spec_img:'',
      status:'',
      original_price:'',
      sale_stock:''
    }
    ]

  };
  @Provide() rules: any = {
    // application: [{ required: true, message: "请选择应用", trigger: "change" }],
    // title: [{ required: true, message: "请输入商品标题", trigger: "blur" }],
    // stock: [{ required: true, message: "请输入库存", trigger: "blur" }],
    // shipping_price: [{ required: true, message: "请输入运费价格", trigger: "blur" }],
    // weight: [{ required: true, message: "请输入重量", trigger: "blur" }],
    // price: [{ required: true, message: "请输入售价", trigger: "blur" }],
    // original_price: [{ required: true, message: "请输入原价", trigger: "blur" }],
    // channel_settle_price: [{ required: true, message: "请输入渠道结算价", trigger: "blur" }],
    // merchant_settle_price: [{ required: true, message: "请输入商家结算价", trigger: "blur" }],
    // suggest_price: [{ required: true, message: "请输入建议零售价", trigger: "blur" }],
    // refund_able: [{ required: true, message: "请输选择是否可退", trigger: "change" }],
    // status: [{ required: true, message: "请输选择上下架", trigger: "change" }],
    // ticket_type: [{ required: true, message: "请选择制码模式", trigger: "change" }],
    // verify_type: [{ required: true, message: "请选择商品类型", trigger: "change" }],
    // verify_way: [{ required: true, message: "请选择与商家结算时机", trigger: "change" }],
    // verify_day: [{ required: true, message: "请输入具体几天", trigger: "blur" }],
    // verify_hour: [{ required: true, message: "请输入核销码保护期", trigger: "blur" }],
    // describe: [{ required: true, message: "请输入商品详情描述", trigger: "blur" }],
    // verify_ticket_num: [{ required: true, message: "请输入单个商品可使用次数", trigger: "blur" }],
    // create_ticket_num: [{ required: true, message: "请输入单个商品生成核销码数量", trigger: "blur" }],
    // dateTime: [{ required: true, message: "请选择核销码有效期", trigger: "change" }],
    // saleDateTime: [{ required: true, message: "请选择售卖时间", trigger: "change" }],
  };
  // 启用禁用
  handleDisable(i,row:any){
    if(i==1){
      this.form.spec_goods_price[i].status=1
    }else{
      this.form.spec_goods_price[i].status=0
    }
    // goodsApi.disabledAdmin(row.id,this.status)
    // .then((res: any) => {
    //   if(res.data.status){
    //     this.$message({
    //       message: '操作成功',
    //       type: "success"
    //     });
    //   }
      // this.loadData()
    // });
  }
  // 添加规格
  handleAddSpec(){
    let a={specList:[],value:'',name:''}
    this.specKindList.push(a)
  }
  // 删除规格
  handleRemove(index:any){
    this.specKindList.splice(index,1)
  }
  // 添加规格值
  handleAddSpecVal(index:any){
    let a={name:'',value:''}
    a.name=this.specKindList[index].name
    a.value=this.specKindList[index].value
    if(this.specKindList[index].specList.length>0){
      let b=this.specKindList[index].specList[0].name//第一个规格值名称
      let c=this.specKindList[index].specList[0].name//新输入的规格值名称
      if(this.specKindList[index].value && b == c){//如何新添加规格值时规格名称和第一个规格值名称不同时不能添加规格值
        this.specKindList[index].specList.push(a)
        // this.specKindList[index].name=''
      }
    }else{
      if(this.specKindList[index].value){
        this.specKindList[index].specList.push(a)
      }
    }
    this.specKindList[index].value=''
  }
  // 删除规格
  handleRemoveVal(indexs:any,index:any){
    this.specKindList[indexs].specList.splice(index,1)
  }
  // 一级分类
  handleChange(value:any) {
    this.kindList.forEach((item:any)=>{
      if(item.id==value){
        this.kindListTwo=item.children
      }
    })
  }
  // 二级分类
  handleChangeTwo(value){
    this.kindListTwo.forEach((item:any)=>{
      if(item.id==value){
        this.kindListThree=item.children
      }
    })
  }
  // 上传图片子组件传递过来的图片路径
  propImg(imgPath: any){
    this.form.logo = imgPath;
  }
  // 上传多张图片子组件传递过来的图片路径
  propImgList(imgPath: any){
    this.form.images = imgPath;
  }
  // 富文本编辑
  editorChange(data:any) {
    this.form.content = data.content;
  }
  // 取消
  cancel(){
    this.$router.push({
      path:'/goodsList'
    })
  }
  // 新建广告商
  handleAdd(){
    let a={id:'' ,code:'',weight:this.form.advertisers.length+1}
    this.form.advertisers.push(a)
  }
  // 提交
  submitFormAdd(formName: any) {
    (this.$refs[formName] as any).validate((valid: boolean) => {
      if (valid) {
          
        if(this.dateTime==null){
          this.dateTime=["",""]
        }
        if(this.saleDateTime==null){
          this.saleDateTime=["",""]
        }
        this.form.verify_start_time=this.dateTime[0];
        this.form.verify_end_time=this.dateTime[1];
        this.form.sale_on_time=this.saleDateTime[0];
        this.form.sale_off_time=this.saleDateTime[1];
      }
      // goodsApi.saveGoods(this.form)
      // .then((res: any) => {
      //   if(res.data.status){
      //     this.$message({
      //       message: '操作成功',
      //       type: "success"
      //     });
      //   }
      //   this.$router.push({
      //     path:'/goodsList'
      //   })
      //   this.$emit("loadData")
      // });
    });
  }
  handleAvatarSuccess(res:any, file:any) {
    this.form.imgPath = res.data.fileUrl;
  }
  created() {
   // 标签
    goodsApi.labelList(1,9999999)
      .then((res: any) => {
        this.labelList = res.data.data.data;
    });
    // 商家
    businessApi.businessList(1,999999,this.searchMapB)
      .then((res: any) => {
        this.businessList = res.data.data.list;
    });
    // 供应商
     supplierApi.supplierList(1,999999,this.searchMapS)
      .then((res: any) => {
        this.supplierList = res.data.data.lists.data;
    });
    // 分类
    goodsApi.goodsKind()
      .then((res: any) => {
        this.kindList = res.data.data;
    });
   }
}
</script>

<style lang="scss" scoped>
.dialog-footer{
  padding-left: 50px
}
.spec-box{
  border: 1px solid #d8d8d8;
  min-height: 200px;
  max-height: 800px;
  overflow-y: scroll;
  padding: 10px;
  .el-input,
  .el-select {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
.form-box {
  margin-bottom: 20px;
  .el-input,
  .el-select {
    width: 200px !important;
  }
  .title{
    line-height: 60px;
    font-weight: bold;
    font-size: 16px;
  }
  .price-title{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .price-txt{
    font-size: 14px;
    color: #333;
  }
  .price-tip{
    color: red;
    font-size: 12px;
    margin-left: 50px;
  }
  .spec-table{
    text-align: center;
    border: 1px solid #eee;
    .el-input{
      width: 100px !important;
      margin: 10px 0;
    }
    th{
      line-height: 50px;
      height: 50px;
    }
    thead{
      background: #f5f5f5;
    }
    th,td{
      border: 1px solid #eee;
    }
  }
}
.avatar-uploader{
  width: 148px;
  height: 148px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px !important;
  text-align: center;
  background: #fff;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
